<template>
    <div class="bt-dashed renter-co-wrap">
        <!-- <Row>
            <Col span="24"> -->
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                     <!-- label-position="right" :label-width="90" -->
                    <FormItem label="同租人："></FormItem>
                    <FormItem prop="name">
                        <Input type="text" v-model="formInline.name" placeholder="同租人姓名" :readonly="isSaved"></Input>
                    </FormItem>
                    <FormItem prop="phone">
                        <Input type="text" v-model="formInline.phone" placeholder="同租人手机" :readonly="isSaved"></Input>
                    </FormItem>
                    <FormItem prop="id_card">
                        <Input type="text" v-model="formInline.id_card" placeholder="同租人身份证" :readonly="isSaved"></Input>
                    </FormItem>
                    <FormItem prop="relation">
                        <Select 
                        v-model="formInline.relation" 
                        style="width: 100px;" 
                        :disabled="isSaved" placement="top">
                            <Option v-for="item in relations" :value="item.value" :key="item.value">{{ item.text }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem style="float:right;" v-if="handle">
                        <Button type="ghost" @click="handleSubmit('formInline')" v-if="!isSaved">保存</Button>
                        <Button type="ghost" @click="handleCancel('formInline')" v-if="!isSaved">取消</Button>
                        <Button type="ghost" @click="handleEdit('formInline')" v-if="isSaved">修改</Button>
                        <Button type="ghost" @click="handleDel('formInline')" v-if="isSaved">删除</Button>
                    </FormItem>
                </Form>
            <!-- </Col>
        </Row> -->
    </div>
</template>

<script>
// import util from '@/libs/util';
import validate from '@/libs/validate'
import { CoRenterRelations } from '@/libs/const'
import { http, api } from '@/libs/http'
export default {
  name: 'renterCo',
  props: {
    corenterData: {
      type: Object,
      required: true
    },
    handle: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    corenterData (newVal) {
      this.formInline = newVal
    }
  },
  data () {
    return {
      isSaved: true, // 是否已保存
      relations: CoRenterRelations.properties,
      formInline: {
        name: '',
        phone: '',
        id_card: '',
        relation: 1
      },
      ruleInline: {
        name: [
          {
            required: true,
            message: '请输入租客姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入租客手机号',
            trigger: 'blur'
          },
          { validator: validate.validPhone }
        ],
        id_card: [
          // {
          //     required: true,
          //     message: '请输入身份证号码',
          //     trigger: 'blur'
          // },
          { validator: validate.validIDCard }
        ]
      }
    }
  },
  created () {
    this.formInline = this.corenterData
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.isSaved = true
          const { name, phone, id_card, relation } = this.formInline
          const params = {
            name,
            phone,
            id_card,
            relation
          }
          if (!params.id_card) {
            delete params.id_card
          }
          http.request(this, api.tenant_co_update, [this.corenterData.id], params, res => {
            // 父组件刷新同租人信息
            // this.$Message.success('修改成功!');
            this.$emit('refresh')
          })
        } else {
          this.$Message.error('请填写正确的同租人信息!')
        }
      })
    },
    handleDel () {
      this.$Modal.confirm({
        title: '删除同租人',
        content: '确定要删除同租人吗?',
        okText: '确定删除',
        onOk: () => {
          http.request(this, api.tenant_co_del, [this.corenterData.id], null, res => {
            // 父组件刷新同租人信息
            this.$emit('refresh')
          })
        }
      })
    },
    handleEdit (name) {
      this.isSaved = false
    },
    handleCancel (name) {
      this.isSaved = true
    }
  }
}
</script>

<style lang="less" scoped>
.renter-co-wrap {
    padding-top: 20px;
}
</style>
